<template>
  <section>
    <van-nav-bar title="订单详情"
                  @click-left="onClickLeft"
                 fixed>
      <van-icon name="arrow-left"
                slot="left"
                color="#333"
                size="0.6rem" />
      <van-icon :name="require('@/assets/img/computer.png')"
                slot="right"
                color="#333"
                size="0.6rem" />
    </van-nav-bar>
    <div class="container">
      <div class="sub">
        <div class="detailInfo detail-border">
          <div class="detail-title">
            <p class="detail-title-text">订单信息</p>
          </div>
          <p class="detail-item">
            <span class="item-left">订单类型：</span>
            <span class="item-right">{{detailData.deliveryFlag==0?'提货订单':'送货订单'}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">订单号：</span>
            <span class="item-right"></span>
          </p>
          <p class="detail-item">
            <span class="item-left">客户名称：</span>
            <span class="item-right">{{detailData.customerName}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">客户手机号：</span>
            <span class="item-right"></span>
          </p>
          <p class="detail-item">
            <span class="item-left">上门时间：</span>
            <span class="item-right">{{detailData.customerTel}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">装车地点：</span>
            <span class="item-right">{{detailData.loadAddress}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">卸车地点：</span>
            <span class="item-right">{{detailData.unloadAddress}}</span>
          </p>
          <!-- <p class="detail-item">
            <span class="item-left">里程数：</span>
            <span class="item-right">{{detailData.addressMiles}}</span>
          </p> -->
          <p class="detail-item">
            <span class="item-left">货物名称：</span>
            <span class="item-right">{{detailData.goodsName}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">货物件数：</span>
            <span class="item-right">{{detailData.goodsAmount}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">货物重量：</span>
            <span class="item-right">{{detailData.goodsTon*1000}}公斤</span>
          </p>
          <p class="detail-item">
            <span class="item-left">货物体积：</span>
            <span class="item-right">{{detailData.goodsCube}}方</span>
          </p>
          <p class="detail-item">
            <span class="item-left">货物情况：</span>
            <span class="item-right">{{detailData.goodsRemark}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">是否过泵：</span>
            <span class="item-right">{{detailData.measuredFlag==1?'是':'否'}}</span>
          </p>
          <!-- <p class="detail-item">
            <span class="item-left">客户维护人：</span>
            <span class="item-right">{{detailData.salerName}}</span>
          </p>
          <p class="detail-item">
            <span class="item-left">客户维护人电话：</span>
            <span class="item-right">{{detailData.salerTel}}</span>
          </p> -->
          <p class="detail-item">
            <span class="item-left">订单备注：</span>
            <span class="item-right">{{detailData.orderRemark}}</span>
          </p>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'orderdetail',
  data () {
    return {
      detailData: JSON.parse(window.localStorage.getItem("orderDetail"))
    };
  },
  mounted () {

  },
  watch: {

  },
  methods: {
    onClickLeft () {
      this.$router.back();
    }
  },
  components: {
    // NavBar
  },
  filters: {
  }
};
</script>

<style scoped lang='scss'>
.container {
  background: #f8f8f8;
  padding: 56px 15px 75px 15px;
  font-size: 16px;
  .sub {
    background: #ffffff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 15px;
      background: #fef7ee;
      color: #333;
      .title-left {
        font-weight: 500;
        display: flex;
        align-items: center;
        img {
          width: 19px;
          height: 5px;
          margin: 0 5px;
        }
      }
      .title-right {
        color: #f18d00;
        font-size: 17px;
        font-weight: 600;
      }
    }
    .detailInfo {
      padding: 10px 15px;
      position: relative;

      .detail-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px 0;
        .detail-title-text {
          color: #333;
          text-align: left;
          font-weight: 500;
        }
      }
      .detail-item {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        .item-left {
          flex: 0 0 auto;
          margin-right: 10px;
          color: #999;
        }
        .item-right {
          color: #333;
          text-align: right;
        }
        .colorNum {
          color: #f18d00;
          font-weight: 500;
        }
        .colorNumRed {
          color: #ff6540;
          font-weight: 500;
        }
      }
    }
    .detail-radius:after {
      content: "";
      position: absolute;
      top: -10px;
      right: -10px;
      background: #f8f8f8;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .detail-radius:before {
      content: "";
      position: absolute;
      top: -10px;
      left: -10px;
      background: #f8f8f8;
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
    .detail-border {
      border-bottom: 2px dashed #cccccc;
    }
  }
}
.isbottom {
  padding-bottom: 16px;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  text-align: center;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fdf3e4;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 47%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
    .btn-error {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #ff6540;
      border: 1px solid #ff6540;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
  }
}
</style>
